<!-- author: wjc -->
<!-- date: 2022-02-26 10:29:10 -->
<!-- description:  -->
<template>
    <div class="login">
        <a-form
            :model="formState"
            name="basic"
            :wrapper-col="{ span: 24 }"
            autocomplete="off"
            @finish="onFinish"
            @finishFailed="onFinishFailed"
        >
            <a-tabs :nzAnimated="false" class="tabs" >
                <a-tab-pane key="1" tab="账户密码登录">
                    <a-form-item name="username" :rules="[{ required: true, message: '请输入您的用户名' }]">
                        <a-input
                            v-model:value="formState.username"
                            placeholder="username: admin or user"
                        >
                            <template #prefix>
                                <UserOutlined />
                            </template>
                        </a-input>
                    </a-form-item>

                    <a-form-item name="password" :rules="[{ required: true, message: '请输入您的密码' }]">
                        <a-input-password
                            v-model:value="formState.password"
                            placeholder="password: ng-alain.com"
                        >
                            <template #prefix>
                                <lock-outlined />
                            </template>
                        </a-input-password>
                    </a-form-item>

                    <a-form-item name="remember" :wrapper-col="{ span: 24 }">
                        <a-checkbox v-model:checked="formState.remember">记住密码</a-checkbox>
                    </a-form-item>

                    <a-form-item :wrapper-col="{ span: 24 }">
                        <a-button type="primary" :block="true" size="large" html-type="submit">登录</a-button>
                    </a-form-item>
                </a-tab-pane>

            </a-tabs>
        </a-form>
    </div>
</template>

<script lang='ts' setup>
import { reactive, ref } from "vue"
import { LockOutlined, UserOutlined } from '@ant-design/icons-vue';
import { post, get } from '@/services/api/request'
import { TokenService } from "@/package/auth/token/token.service";
import { ITokenService } from "@/package/auth/token/interface";
import { useRouter, useRoute } from 'vue-router'


interface FormState {
    username: string;
    password: string;
    remember: boolean;
}

const router = useRouter()
const route = useRoute()

// 建立token服务
const tokenSrv:ITokenService = new TokenService()
const formState = reactive<FormState>({
    username: '',
    password: '',
    remember: true,
});
let type = ref<string>('0');

const switchs = (activeKey: string): void => {
    type.value = activeKey!;
};
//登录
const onFinish = (values: any) => {
    post('login', '', values).then((res) => {
        const expired = new Date().valueOf() + 60*2
        const settoken = tokenSrv.set({token:res.token,expired:expired})
        console.log(settoken)
        if(settoken){
            router.push({path:'/v1'})
        }
    })

};

const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
};
</script>
<script lang="ts">
export default {
    name: 'login'
}
</script>
<style scoped lang='less'>
.login {
    display: block;
    width: 368px;
    margin: 0 auto;
}
</style>